<template>
  <div class="form-container">
    <h1>注册</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="form.sub_password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="form.phone_number"></el-input>
      </el-form-item>
      <el-radio v-model="form.sex" label="0">男</el-radio>
      <el-radio v-model="form.sex" label="1">女</el-radio>
      <el-form-item>
        <el-button type="primary" @click="check_password">注册</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          sub_password: '',
          phone_number: '',
          sex: 0,
          password: '',
          name: '',
        }
      }
    },
    methods: {
      check_password() {
        if(this.form.name == "") {
          this.showError("用户名不能为空！");
          return;
        }else if (this.form.password.length < 8) {
          this.showError("密码小于8位数。");
          return;
        }else if(this.form.password != this.form.sub_password){
          this.showError("两次输入的密码不一致。");
          return;
        }else if(this.form.phone_number.length!=11){
          this.showError("手机号格式不对!")
          return;
        }
      this.showAlert("注册成功,跳转登录页面");
      // console.log("id:",this.form.name)
        this.$router.push('/');
      },
      back(){
        // console.log("back")
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>
  .form-container {
    display: grid;
    place-items: center;
    min-height: 50vh;
  }
</style>
